﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页带有定时器的无缝轮播图</title>
<script src="../js/jquery.min.js"></script>
<style>
 * {
	padding:0;
	margin:0;
	list-style:none;
	border:0;
}
.all {
	width:500px;
	height:200px;
	padding:7px;
	border:1px solid #ccc;
	margin:100px auto;
	position:relative;
}
.screen {
	width:500px;
	height:200px;
	overflow:hidden;
	position:relative;
}
.screen li {
	width:500px;
	height:200px;
	overflow:hidden;
	float:left;
}
.screen ul {
	position:absolute;
	left:0;
	top:0px;
	width:3000px;
}
.all ol {
	position:absolute;
	right:10px;
	bottom:10px;
	line-height:20px;
	text-align:center;
}
.all ol li {
	float:left;
	width:20px;
	height:20px;
	background:#fff;
	border:1px solid #ccc;
	margin-left:10px;
	cursor:pointer;
}
.all ol li.current {
	background:yellow;
}
#arr {
	display:none;
}
#arr span {
	width:40px;
	height:40px;
	position:absolute;
	left:5px;
	top:50%;
	margin-top:-20px;
	background:#000;
	cursor:pointer;
	line-height:40px;
	text-align:center;
	font-weight:bold;
	font-family:'黑体';
	font-size:30px;
	color:#fff;
	opacity:0.3;
	border:1px solid #fff;
}
#arr #right {
	right:5px;
	left:auto;
}
</style>
</head>
<body>
<div class="all" id="all">
    <div class="screen" id="screen">
        <ul id="ul">
            <li><img src="http://www.jq22.com/img/cs/500x300-1.png" width="500" height="200"></li>
            <li><img src="http://www.jq22.com/img/cs/500x300-2.png" width="500" height="200"></li>
            <li><img src="http://www.jq22.com/img/cs/500x300-3.png" width="500" height="200"></li>
            <li><img src="http://www.jq22.com/img/cs/500x300-4.png" width="500" height="200"></li>
            <li><img src="http://www.jq22.com/img/cs/500x300-5.png" width="500" height="200"></li>
        </ul>
        <ol>

        </ol>
        <div id="arr">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>
</div>

<script>
window.onload = function() {


    var all = document.getElementById("all");
    var screen = all.firstElementChild || all.firstChild;
    var imgWidth = screen.offsetWidth;
    var ul = screen.firstElementChild || screen.firstChild;
    var ol = screen.children[1];
    var div = screen.lastElementChild || screen.lastChild;
    var spanArr = div.children;

    //2.复制第一张图片所在的li,添加到ul的最后面。
    var ulNewLi = ul.children[0].cloneNode(true);
    ul.appendChild(ulNewLi);
    //3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。
    for (var i = 0; i < ul.children.length - 1; i++) {
        var olNewLi = document.createElement("li");
        olNewLi.innerHTML = i + 1;
        ol.appendChild(olNewLi)
    }
    var olLiArr = ol.children;
    olLiArr[0].className = "current";

    //4.鼠标放到ol的li上切换图片
    for (var i = 0; i < olLiArr.length; i++) {
        //自定义属性，把索引值绑定到元素的index属性上
        olLiArr[i].index = i;
        olLiArr[i].onmouseover = function() { 
            //排他思想
            for (var j = 0; j < olLiArr.length; j++) {
                olLiArr[j].className = "";
            }
            this.className = "current";
            //鼠标放到小的方块上的时候索引值和key以及square同步
            //                    key = this.index;
            //                    square = this.index;
            key = square = this.index;
            //移动盒子
            animate(ul, -this.index * imgWidth);
        }
    }

    //5.添加定时器
    var timer = setInterval(autoPlay, 3000);

    //固定向右切换图片
    //两个定时器（一个记录图片，一个记录小方块）
    var key = 0;
    var square = 0;

    function autoPlay() {
        //通过控制key的自增来模拟图片的索引值，然后移动ul
        key++;
        if (key > olLiArr.length) {
            //图片已经滑动到最后一张，接下来，跳转到第一张，然后在滑动到第二张
            ul.style.left = 0;
            key = 1;
        }
        animate(ul, -key * imgWidth);
        //通过控制square的自增来模拟小方块的索引值，然后点亮盒子
        //排他思想做小方块
        square++;
        if (square > olLiArr.length - 1) { //索引值不能大于等于5，如果等于5，立刻变为0；
            square = 0;
        }
        for (var i = 0; i < olLiArr.length; i++) {
            olLiArr[i].className = "";
        }
        olLiArr[square].className = "current";
    }

    //鼠标放上去清除定时器，移开后在开启定时器
    all.onmouseover = function() { 
        div.style.display = "block";
        clearInterval(timer);
    }
    all.onmouseout = function() {
        div.style.display = "none";
        timer = setInterval(autoPlay, 3000);
    }

    //6.左右切换图片（鼠标放上去显示，移开隐藏）
    spanArr[0].onclick = function() {
        //通过控制key的自增来模拟图片的索引值，然后移动ul
        key--;
        if (key < 0) {
            //先移动到最后一张，然后key的值取之前一张的索引值，然后在向前移动
            ul.style.left = -imgWidth * (olLiArr.length) + "px";
            key = olLiArr.length - 1;
        }
        animate(ul, -key * imgWidth);
        //通过控制square的自增来模拟小方块的索引值，然后点亮盒子
        //排他思想做小方块
        square--;
        if (square < 0) { //索引值不能大于等于5，如果等于5，立刻变为0；
            square = olLiArr.length - 1; 
        }
        for (var i = 0; i < olLiArr.length; i++) {
            olLiArr[i].className = "";
        }
        olLiArr[square].className = "current";
    }
    spanArr[1].onclick = function() {
        //右侧的和定时器一模一样
        autoPlay();
    }


    function animate(ele, target) {
        clearInterval(ele.timer);
        var speed = target > ele.offsetLeft ? 10 : -10;
        ele.timer = setInterval(function() {
            var val = target - ele.offsetLeft;
            ele.style.left = ele.offsetLeft + speed + "px";
            if (Math.abs(val) < Math.abs(speed)) {
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        }, 10)
    }
}
</script>

</body>
</html>
